import {Button, Form, Input, message, Upload } from 'antd'
import './index.scss'
import React, { useState } from 'react'
import { UploadOutlined } from '@ant-design/icons';
import useStores from 'Stores';
import { Redirect } from 'react-router-dom';

const BasicSetting = () => {
  const [img, setImg] = useState('');
  const {root, post} = useStores()


  if (!root.isLogin) {
    return <Redirect to="/" />
  }

  const normFile = (e: any) => {
    console.log('Upload event:', e);
    setImg(e.fileList[0].originFileObj) 
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  const handAvator = async()=>{
    console.log(img);
    let file = img as unknown as Blob
    const res = await post.uploadAvatar(file) 
    message.success(`${res}请重新登陆可看到头像`)

  }

  return (
    <div className="basic-setting">
      <Form >
        <Form.Item
        name="upload"
        label="头像"
        style={{width: '30%'}}
        valuePropName="fileList"
        getValueFromEvent={normFile}
        extra="请设置你的头像"
      >
        <Upload name="logo" listType="picture" >
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload>
      </Form.Item>
        <Form.Item>
          <Button type="primary" className="submit_btn" onClick={()=>{handAvator()}}>
            提交修改
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default BasicSetting
